<template>
  <public-footer>
    <div class="top">
      <div class="inp">
        <input type="text" placeholder="输入商品名称搜索" />
        <span class="iconfont icon-sousuo"></span>
      </div>
    </div>
    <div class="bottom">
      <div class="left">
        <ul>
          <li
            v-for="it in typesList"
            :key="it.name"
            @click="productList(it)"
            :class="it.active ? 'active' : ''"
          >
            {{ it.name }}
          </li>
        </ul>
      </div>
      <div class="right" @scroll="more">
        <ul>
          <li v-for="it in dataList" :key="it.id">
            <img :src="it.img" alt="" />
            <div>
              <span class="list_1">{{ it.name }}</span>
              <p><span>开始</span>{{ it.st | dateFormat("MM月DD日 hh时") }}</p>
              <p><span>结束</span>{{ it.et | dateFormat("MM月DD日 hh时") }}</p>
              <span class="list_2">价格:￥ </span
              ><span class="list_3">{{ it.price }}元</span>
              <br />
              <button @click="joinCart(it)">加入购物车</button>
            </div>
          </li>
        </ul>
        <p v-if="loading">加载更多中>>>></p>
        <p v-else-if="hasMore">上划加载更多</p>
        <p v-else>没有更多了!!!</p>
      </div>
    </div>
  </public-footer>
</template>


<script>
import { typesListApi, typesApi, cartAddApi } from "../../apis/types";
export default {
  data() {
    return {
      typesList: [],
      dataList: [],
      page: 1,
      // 表示有更多的数据
      hasMore: true,
      // 数据接口请求中
      loading: true,
    };
  },
  created() {
    let typesList_2 = typesApi();
    typesList_2.then((data) => {
      let list_type = data.data.map((it) => {
        return { name: it, active: false };
      });
      this.typesList = list_type;
      this.typesList.unshift({ name: "全部分类", active: true });
    });

    let typesList_1 = typesListApi({ type: "", size: 6, page: this.page });
    typesList_1.then((data, index) => {
      this.dataList = data.data.rows.map((el, index) => {
        el.img = "http://www.shuiyue.info:12600" + el.banner[0].path;
        return el;
      });
    });
    setTimeout(() => {
      this.loading = false;
    });
  },

  methods: {
    //滚动加载更多
    more(evt) {
      let isBot =
        evt.target.scrollHeight <
        evt.target.offsetHeight + evt.target.scrollTop + 5;
      if (isBot && this.hasMore && !this.loading) {
        this.page += 1;
        this.loading = true;
        this.getList("");
      }
    },
    //分类商品
    productList(_type) {
      this.typesList.forEach((it) => {
        it.active = false;
      });
      _type.active = true;
      this.page = 1;
      this.dataList = [];
      this.loading = true;
      if (_type.name === "全部分类") {
        this.getList("");
      } else {
        this.getList(_type.name);
      }
    },
    //加入购物车
    joinCart(obj){
      let cartAdd = cartAddApi({product: {...obj,count:1,checked:false}})
      cartAdd.then(data=>{
        if(data.code===200){
          this.$toast({
                message: `添加购物车成功`,
                position: "bottom",
              });
        }
      })
    },
    //调用接口获取数据
    getList(name) {
      let moreList = typesListApi({ type: name, size: 6, page: this.page });
      moreList.then((data) => {
        let _list = data.data.rows.map((it) => {
          it.img = "http://www.shuiyue.info:12600" + it.banner[0].path;
          return it;
        });
        this.dataList = this.dataList.concat(_list);
        // 设置是否有更多的数据，还没有获取
        this.hasMore = this.page < Math.ceil(data.data.total / 6);
      });
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
  },
};
</script>


<style lang="less" scoped>
@import "../../style/reset.css";
.top {
  width: 100%;
  height: 3rem;

  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgb(107, 107, 107);
  .inp {
    width: 100%;
    height: 2rem;
    background-color: rgba(206, 204, 201, 0.5);
    input {
      width: 88%;
      margin-left: 0.5rem;
      height: 100%;
      border: none;
      background-color: transparent;
    }
    span {
      font-size: 1.2rem;
    }
  }
}
.bottom {
  display: flex;
  height: calc(100% - 3rem);
  .left {
    width: 8rem;

    ul {
      li {
        width: 100%;
        height: 2rem;
        font-size: 1rem;
        color: rgb(96, 99, 102);
        line-height: 2rem;
        position: relative;
      }
      .active {
        color: rgb(255, 123, 0);
        &::after {
          content: "";
          display: block;
          position: absolute;
          top: 50%;
          right: 9px;
          margin-top: -8px;
          width: 0;
          height: 0;
          border: solid 8px transparent;
          border-left-color: #e40114;
        }
      }
    }
  }
  .right {
    width: 100%;
    // height: ;
    overflow-x: hidden;
    ul {
      li {
        padding-top: 0.5rem;
        width: 100%;
        height: 8rem;
        display: flex;
        border-bottom: 1px solid rgb(172, 167, 167);
        img {
          width: 45%;
          height: 80%;
          margin-right: 10px;
          margin-top: 0.5rem;
        }
        > div {
          margin-top: 0.5rem;
          font-size: 0.8rem;
          p:nth-child(2) {
            > span {
              font-size: 0.7rem;
              margin-right: 8px;
            }
          }
          p:nth-child(3) {
            > span {
              font-size: 0.7rem;
              margin-right: 8px;
            }
          }
          .list_2 {
            font-size: 0.7rem;
          }
          .list_3 {
            font-size: 0.8rem;
            color: rgb(255, 0, 0);
          }
          button {
            font-size: 0.7rem;
            width: 5rem;
            height: 1.5rem;
            float: right;
            margin-left: 2rem;
            border: none;
            margin-top: 0.5rem;
            color: rgb(255, 255, 255);
            background-color: rgb(255, 166, 0);
          }
        }
      }
    }
  }
}
</style>